<template>
	<view class="content h-100v">
		<view class="power">{{ topText }}</view>
		<view :animation="animationData" class="bottomLogo"></view>
	</view>
</template>

<script>
import { logout, getLoginStatus } from '@/api/account.js';
export default {
	data() {
		return {
			topText: 'The Power of Music',
			animationData: {},
			animation: {}
		};
	},
	onLoad() {
		this.animation = uni.createAnimation({
			duration: 1000,
			timingFunction: 'ease'
		});
		this.animation.opacity(0).step();
		this.animationData = this.animation.export();
	},
	async mounted() {
		setTimeout(() => {
			this.animation.opacity(1).step();
			this.animationData = this.animation.export();
		}, 1200);
		let status = {}
		try{
			status = await getLoginStatus();
		}catch(err){
			status = err
		}
		if (status.code == 200) {
			uni.reLaunch({
				url: '/pages/main/main'
			});
		} else {
			if (uni.getStorageSync('immission') == true) {
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/main/main'
					});
				}, 2600);
			} else {
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/index'
					});
				}, 2600);
			}
		}
	}
};
</script>

<style lang="scss">
.content {
	background-color: $primary;
	position: relative;
	.power {
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 32px;
		color: white;
		white-space: nowrap;
	}
	.bottomLogo {
		background-image: url(../../static/init/bottomLogo_h.png);
		background-size: cover;
		background-repeat: no-repeat;
		width: 170px;
		height: 32px;
		position: absolute;
		bottom: 3%;
		left: 50%;
		transform: translateX(-50%) scale(0.9);
	}
}
</style>
